<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>clientX/clientY example</title>
    <style>
        body {
            height: 100%;
            width: 100%;
            background: greenyellow;
        }

        div {
            position: absolute;
            height: 50%;
            width: 50%;
            background: red;
        }
    </style>
    <script>
        var $ = x => document.getElementById(x);
        function showCoords(evt) {
            console.log(evt);
            var rect = $('workspace').getBoundingClientRect();
            $('output').innerText = (
                `clientX value: ${evt.clientX - rect.x} \nclientY value: ${evt.clientY - rect.y}`
            );
        }

        function onDocumentMouseMove(event){
            console.log(event);
}
    </script>
</head>

<body >
    <p id="output">sfsdf</p>
    <div id='workspace'  onmousedown="showCoords(event)" onmousemove="onDocumentMouseMove(event)">To display the mouse coordinates click anywhere on the page.</div>
</body>

</html>